<script>
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { useAuthStore } from '@/stores/auth'
import {
  UserOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  LogoutOutlined,
  VideoCameraOutlined,
  FileTextOutlined
} from '@ant-design/icons-vue'

export default defineComponent({
  name: 'AdminLayout',
  setup() {
    const router = useRouter()
    const authStore = useAuthStore()
    const collapsed = ref(false)
    
    // 获取用户信息
    const getUserInfo = () => {
      const userStr = localStorage.getItem('admin_user')
      if (userStr) {
        try {
          const user = JSON.parse(userStr)
          // 处理Unicode编码的名称
          if (user.name && typeof user.name === 'string') {
            user.name = decodeURIComponent(JSON.parse('"' + user.name + '"'))
          }
          return user
        } catch (e) {
          console.error('解析用户信息失败:', e)
          return null
        }
      }
      return null
    }
    
    const userInfo = ref(getUserInfo())

    const menuItems = [
      {
        key: '/videos',
        icon: VideoCameraOutlined,
        label: '视频管理',
        title: '视频管理'
      },
      {
        key: '/articles',
        icon: FileTextOutlined,
        label: '文章管理',
        title: '文章管理'
      },
      {
        key: '/managers',
        icon: UserOutlined,
        label: '管理员管理',
        title: '管理员管理'
      }
    ]

    const handleMenuClick = ({ key }) => {
      router.push(key)
    }

    const handleLogout = async () => {
      try {
        await authStore.logout()
        message.success('退出登录成功')
        // 跳转到登录页
        router.push('/login')
      } catch (error) {
        console.error('退出登录失败:', error)
        message.warning('退出登录失败，但将清除本地登录状态')
        // 跳转到登录页
        router.push('/login')
      }
    }

    const handleCollapse = (val) => {
      collapsed.value = val
    }

    return {
      collapsed,
      menuItems,
      handleMenuClick,
      handleLogout,
      handleCollapse,

      MenuFoldOutlined,
      MenuUnfoldOutlined,
      UserOutlined,
      LogoutOutlined,
      VideoCameraOutlined,
      FileTextOutlined,
      userInfo
    }
  }
})
</script>

<template>
  <a-layout style="min-height: 100vh; width: 100vw; margin: 0; background: #ffffff;">
    <a-layout-sider :collapsed="collapsed" collapsible @collapse="handleCollapse" style="background: #000000; border-right: 1px solid #000000;">
      <div class="logo">
        <h2 v-if="!collapsed" style="color: white; text-align: center; margin: 8px 0; font-size: 14px;">后台管理</h2>
        <h2 v-else style="color: white; text-align: center; margin: 8px 0; font-size: 12px;">后台</h2>
      </div>
      <a-menu
        theme="dark"
        mode="inline"
        :default-selected-keys="[$route.path]"
        @click="handleMenuClick"
        style="background: #000000; border: none;"
      >
        <template v-for="item in menuItems">
          <a-sub-menu v-if="item.children" :key="`sub-${item.key}`">
            <template #title>
              <component :is="item.icon" />
              <span>{{ item.label }}</span>
            </template>
            <a-menu-item v-for="child in item.children" :key="child.key">
              <span>{{ child.label }}</span>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item v-else :key="item.key">
            <component :is="item.icon" />
            <span>{{ item.label }}</span>
          </a-menu-item>
        </template>
      </a-menu>
    </a-layout-sider>
    
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0; display: flex; align-items: center; justify-content: space-between; height: 48px; border-bottom: 1px solid #000000;">
        <div style="display: flex; align-items: center;">
          <a-button
            type="text"
            @click="collapsed = !collapsed"
            style="font-size: 14px; width: 48px; height: 48px; border: none !important; color: #000000;"
          >
            <component :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined" />
          </a-button>
          <span style="font-size: 14px; font-weight: 600; color: #000000;">{{ $route.meta.title || '后台管理系统' }}</span>
        </div>
        
        <div style="margin-right: 8px;">
          <a-dropdown>
            <a-button type="text" style="display: flex; align-items: center; border: none !important; background: #ffffff; color: #000000; height: 32px; padding: 4px 8px; box-shadow: none !important;">
              <a-avatar size="small" style="margin-right: 4px; background: #000000;">
                <template #icon><UserOutlined /></template>
              </a-avatar>
              <span style="font-size: 12px;">{{ userInfo?.name || '管理员' }}</span>
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item key="profile">
                  <UserOutlined />
                  个人资料
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="logout" @click="handleLogout">
                  <LogoutOutlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>
      
      <a-layout-content style="margin: 0; padding: 0; background: #fff; min-height: calc(100vh - 48px); overflow-y: auto;">
        <slot />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style scoped>
.logo {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #001529 !important;
  /* border-bottom: 1px solid #f0f0f0; */
}

:deep(.ant-layout-sider) {
  background: #001529 !important;
}

:deep(.ant-layout-sider-children) {
  background: #001529 !important;
}

:deep(.ant-menu) {
  background: #001529 !important;
  border-right: none !important;
  color: #fff !important;
}

:deep(.ant-menu-item) {
  margin: 4px 8px !important;
  border-radius: 6px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

:deep(.ant-menu-item:hover) {
  background: #1890ff !important;
  color: #fff !important;
}

:deep(.ant-menu-item-selected) {
  background: #1890ff !important;
  color: #fff !important;
}

:deep(.ant-layout-sider-trigger) {
  background: #002140 !important;
  color: #fff !important;
  border-top: 1px solid #002140 !important;
}

:deep(.logo) {
  color: #fff !important;
}
</style>